<template>
	<view>
	<!--授权手机号-->
	<uni-popup ref="popup" type="center" class="uni_popup">
		<view class="phoneBox">
			<image class="close" src="/static/image/close1.png" @click="close"><image>
			<view class="intro">为更好体验全部功能，请完善信息。</view>
			<image class="img" src="/static/image/loginImg.png"></image>
			<button @getphonenumber="onGetPhoneNumber" open-type="getPhoneNumber" class="btn">微信一键授权手机号</button>
		</view>
	</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uniapp-components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		props:{
			
		},
		methods: {
			open(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			onGetPhoneNumber(e) {
				uni.showLoading({
					title: '请等待',
					mask: false
				})
				const encryptedData = e.detail.encryptedData
				const iv = e.detail.iv
				console.log(e.detail.errMsg);
				if(e.detail.errMsg =="getPhoneNumber:ok"){
					this.login(encryptedData, iv)
				}else{
					uni.showToast({
						title: '请重新获取',
						icon: "none"
					})
				}
			},
			login(encryptedData, iv) {
				uni.hideLoading()
				var code = '';
				var that=this
				uni.login({
					provider: 'weixin',
					success: function(logRes) {
						code = logRes.code;
						var parm={
							code: code,
							encryptedData: encryptedData,
							iv: iv
						}
						that.$http.getUserMobile(parm).then(res=>{
							if(res.code==1){
								that.close()
								that.getUser()
								that.$emit('getMobile')
							} else {
								uni.showToast({
									title:'授权失败，请重新授权',
									icon: "none"
								})
							}
						})	
					}
				});
				
			},
			getUser() {
				this.$http.getUser().then(res => {
					this.userInfo = res.data;
					uni.setStorageSync('mobile',this.userInfo && this.userInfo.mobile?this.userInfo.mobile:'')
				});
			},
			
		},
			

	}
</script>

<style scoped lang="scss">
	.phoneBox{
		width: 690rpx;
		height:530rpx;
		background-color: #fff;
		border-radius: 8rpx;
		text-align: center;
		.close{
			width:37rpx;
			height:37rpx;
			float:right;
			margin:36rpx;
		}
		image{
			width:0;
			height:0;
		}
		.intro{
			width:100%;
			text-align: center;
			font-size:30rpx;
			color:#000;
			font-weight: blod;
			margin-top:80rpx;
			
		}
		.img{
			width:186rpx;
			height:160rpx;	
			margin-top:50rpx;
		}
		
	}
	.btn{
		width:390rpx;
		height:68rpx;
		line-height: 68rpx;
		font-size:24rpx;
		color:#fff;
		margin-top:45rpx;
		background-color: #E52F27;
		border-radius: 34rpx;
		&::after{
			border:0;
		}
		
	}
</style>
